<template>
  <div class="safe-warring">
    <div class="safe-radio-body">
      <el-radio-group v-model="activeName" size="small" @change="selectStyle">
        <el-radio-button label="first" >实时报警</el-radio-button>
        <el-radio-button label="second" >人员实时状态</el-radio-button>
      </el-radio-group>
    </div>
    <div class="safe-warring-body-700">
          <div style="padding-left: 10px; display: inline-flex">
            <div class="warring-tz">
              <div>体征异常</div>
              <div>{{tizheng}}</div>
            </div>
            <div class="warring-gj">
              <div>安全工具异常</div>
              <div>{{gongju}}</div>
            </div>
            <div class="warring-qy">
              <div>危险区域报警</div>
              <div>{{weilan}}</div>
            </div>
            <div class="warring-sos">
              <div>SOS报警</div>
              <div>{{sos}}</div>
            </div>
            <div class="warring-dl">
              <div>跌落报警</div>
              <div>{{dieluo}}</div>
            </div>
          </div>
          <div style="padding-left: 10px;padding-top: 5px; padding-right: 5px;">
            <el-table
              :data="safeUserData"
              style="width: 100%"
              height="145px"
              stripe
              :header-cell-style="{background:'#1C7CD5',color:'#fff'}"
            >
<!--              <el-table-column-->
<!--                prop="maoSn"-->
<!--                label="终端编号"-->
<!--                width="152" height="20">-->
<!--                <template slot-scope="scope">-->
<!--                  <span v-if="scope.row.maoSn==null">未绑定</span>-->
<!--                  <span v-if="scope.row.maoSn!=null">{{scope.row.maoSn}}</span>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column
                prop="name"
                label="姓名"
                width="110">
              </el-table-column>
              <el-table-column
                prop="name"
                label="班组"
                width="60">
                <template slot-scope="scope">
                  <span >一组</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="role"
                label="工种"
                width="70">
                <template slot-scope="scope">
                  <span v-if="scope.row.role==1">技工</span>
                  <span v-if="scope.row.role==2">安全员</span>
                  <span v-if="scope.row.role==3">监理</span>
                  <span v-if="scope.row.role==4">(负责人)</span>
                  <span v-if="scope.row.role==5">(班长)</span>
                  <span v-if="scope.row.role==6">(作业人员)</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="warringList"
                width="70"
                label="体征">
                <template slot-scope="scope">
                  <span v-if="has(scope.row.warringList,3)" style="color: #FF580E">体温异常</span>
                  <span v-else>正常</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="maoState"
                width="70"
                label="安全帽">
                <template slot-scope="scope">
                  <span v-if="scope.row.warringList!=null && (has(scope.row.warringList,8)|| has(scope.row.warringList,9))">
                  <span v-if="has(scope.row.warringList,8) || has(scope.row.warringList,9)" style="color: #FF580E">近电提示</span>
                  </span>
                  <span v-else>
                  <span v-if="scope.row.maoState==1" style="color: #ff0000">未佩戴</span>
                  <span v-else-if="scope.row.maoState==2">已佩戴</span>
                  <span v-else>未绑定</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="daiState"
                width="70"
                label="安全带">
                <template slot-scope="scope">
                <span
                  :class="'state-warring'"
                  disable-transitions>-</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="warringList"
                width="80"
                label="SOS/跌落">
                <template slot-scope="scope">
                  <span v-if="has(scope.row.warringList,6)" style="color: #FF580E">SOS</span>
                  <span v-else-if="has(scope.row.warringList,7)" style="color: #FF580E">跌落</span>
                  <span v-else>无</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="maoWorking"
                width="80"
                label="定位">
                <template slot-scope="scope">
                  <span v-if="scope.row.warringList!=null && (has(scope.row.warringList,1)|| has(scope.row.warringList,2))" style="color: #FF580E">
                  {{scope.row.warringList | hasWl}}
                  </span>
                  <span v-else>
                  <span v-if="scope.row.maoWorking==1" style="color: #24BE5A">在线</span>
                  <span v-if="scope.row.maoWorking==2" style="color: #FF580E ;">离线</span>
                  <span v-if="scope.row.maoWorking==null" style="color: #495057">未定位</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="recordTime"
                label="最后定位时间">
                <template slot-scope="scope">
                <span disable-transitions v-if="scope.row.maoLastTime!=null">{{scope.row.recordTime | timestampToDate}}<img src="~@/assets/img/ps.png" style="cursor: pointer" @click="inmap(scope.row)"/></span>
                <span disable-transitions v-if="scope.row.maoLastTime==null">未定位</span>

                </template>
              </el-table-column>
            </el-table>
          </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "SafeWarring",
    data(){
      return {
        activeName: 'second',
        warringStyle: 'safe-warring-body',
        tizheng:"0",
        gongju:"0",
        weilan:"0",
        sos:"0",
        dieluo:"0",
        safetUserimer:"",
        safeUserData: [],
        currid: '',
        openInfoId:'',
        markerMap:{},
      }
    },
    filters:{
      timestampToDate (cjsj,time=false) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
        var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
        var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
        var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
        return Y+M+D+h+m+s
      },
      hasWl(arr) {
        let bool = ''; //默认不在数组中
        if(arr!=null && arr.length>0) {
          for (var i = 0, len = arr.length; i < len; i++) { //遍历数组的值
            if (arr[i] == 1 || arr[i] == 2) {
              bool = '围栏告警';  //若存在某个值与改值相等，bool值为true
              break
            }
          }
        }
        return bool; //返回bool
      }
    },
    mounted() {
      let __this = this
      let config = {
        headers: {'Content-Type': 'application/json'}
      }

      this.axios.get("device/listUserDevice").then((res)=>{
        __this.safeUserData = res.data.result
      })

      this.axios.get("warning/safeInfo ").then(function (response) {
        let result = response.data
        if(result.code=='200'){
          __this.tizheng = ""+result.result.tizheng
          __this.gongju = ""+result.result.gongju
          __this.weilan = ""+result.result.weilan
          __this.sos = ""+result.result.sos
          __this.dieluo = ""+result.result.dieluo
        }
      }).catch(function (error) {
        console.log(error)
      })
      this.safeUsertimer = setInterval(this.safeUsertask, 10000)
    },
    beforeDestroy() {
      let overlays = global.map.getAllOverlays("marker");
      global.map.remove(overlays);
      clearInterval(this.safeUsertimer);
      this.closeInfoWindow()
      this.currid = ''
    },
    methods:{
      selectStyle(val){
        if(val=="first") {
          this.warringStyle = 'safe-warring-body';
          this.$router.push({path: "/safeWarring"});
        }else{
          this.warringStyle = 'safe-warring-body-700';
        }
      },
      safeUsertask(){
        let _this = this
        this.axios.get("warning/safeInfo ").then(function (response) {
          let result = response.data
          if(result.code=='200'){
            _this.tizheng = ""+result.result.tizheng
            _this.gongju = ""+result.result.gongju
            _this.weilan = ""+result.result.weilan
            _this.sos = ""+result.result.sos
            _this.dieluo = ""+result.result.dieluo
          }
        }).catch(function (error) {
          console.log(error)
        })

        this.axios.get("device/listUserDevice").then((res)=>{
          _this.safeUserData = res.data.result
          for(let i=0;i<_this.safeUserData.length;i++){
            if(_this.safeUserData[i].id==_this.currid){
              console.log(_this.safeUserData[i])
              _this.updateMarker(_this.safeUserData[i])
              break;
            }
          }
        })
      },
      getMarker(markerId){
        let overlays = map.getAllOverlays("marker");
        for(var i = 0; i < overlays.length; i++){
          // 获取存在每个 extData 中的 id
          let id = overlays[i].getExtData().id;
          //如果存在就返回
          if(markerId == id){
            let m = overlays[i]
            return m
          }
        }
      },
      updateMarker(row){
        let that = this
        let marker = that.getMarker(row.id)
        global.map.clearInfoWindow()
        if(marker!=null) {
          let icon = this.makeIcon(row)
          marker.setIcon(new AMap.Icon({
            image:icon,
            size: new AMap.Size(36, 36), //图标大小
            imageSize: new AMap.Size(36, 36)
          }))

          let lnglat = []
          lnglat.push(row.lon2)
          lnglat.push(row.lat2)
          //marker.moveTo(lnglat,60,function(k){return k})
          marker.setPosition(lnglat)
          AMap.event.addListener(marker, 'click', () => {
            that.openInfoId = row.id
            that.openInfo(row, marker)
          })
          marker.setLabel({
            offset: new AMap.Pixel(-34, -2),  //设置文本标注偏移量
            content: "<div class='userLabel'>"+row.name+"(高度："+(row.alt==null?0:row.alt.toFixed(1))+"米)</div>", //设置文本标注内容
            direction: 'right', //设置文本标注方位
          });
          if(that.openInfoId == row.id){
            that.openInfo(row, marker)
          }
        }
      },

      inmap(row){
        let overlays = global.map.getAllOverlays("marker");
        global.map.remove(overlays);
        //判断地图上是否存在该marker
        //地图上所有的marker

        if(row==null){

        }else {
          this.currid = row.id
          let overlays = global.map.getAllOverlays("marker");

          for (var i = 0; i < overlays.length; i++) {
            // 获取存在每个 extData 中的 id
            let id = overlays[i].getExtData().id;
            //如果存在就返回
            if (row.id == id) {
              global.map.panTo(overlays[i].position)
            }
          }

          let lnglat = []
          lnglat.push(row.lon2)
          lnglat.push(row.lat2)
          let icon = this.makeIcon(row)
          let marker = new AMap.Marker({
            map: global.map,
            icon: icon,
            position: new AMap.LngLat(lnglat[0], lnglat[1]),
            extData: {
              id: row.id
            }
          });

          global.map.panTo(lnglat)
          marker.setLabel({
            offset: new AMap.Pixel(-34, -2),  //设置文本标注偏移量
            content: "<div class='userLabel'>" + row.name + "(高度：" + (row.alt == null ? 0 : row.alt.toFixed(1)) + "米)</div>", //设置文本标注内容
            direction: 'right', //设置文本标注方位
          });
          AMap.event.addListener(marker, 'click', () => {
            this.openInfoId = row.id
            this.openInfo(row, marker)
          })
        }
      },
      makeIcon(row){
        let icon = ''
        if(row.role==1 || row.role==6){
          if(row.state==1 ){
            if(row.warring <=0){
              icon = '/static/img/4-04-01-36.png'
            }else{
              icon = '/static/img/4-04-02-36.png'
            }

          }else{
            icon = '/static/img/4-04-03-36.png'
          }
        }
        if(row.role==2){
          if(row.state==1){
            if(row.warring <=0){
              icon = '/static/img/3-04-01-36.png'
            }else{
              icon = '/static/img/3-04-02-36.png'
            }
          }else{
            icon = '/static/img/3-04-03-36.png'
          }
        }
        if(row.role==3 || row.role==4 ||row.role==5){
          if(row.state==1){
            if(row.warring <=0){
              icon = '/static/img/2-04-01-36.png'
            }else{
              icon = '/static/img/2-04-02-36.png'
            }
          }else{
            icon = '/static/img/2-04-03-36.png'
          }
        }
        return icon
      },
      // 显示信息窗体
      openInfo (val, vMarker) {
        //if (this.startInterval) clearInterval(this.startInterval)
        let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(10, -35)})
        let title = val.name
        let content = []
        //content.push('<span style="color:#f54849">' + val.name + '</span>')
        if(val.state==1) {
          content.push('在线状态：<span style="color:#24BE5A">在线</span>')
        }
        if(val.state==2) {
          content.push('在线状态：<span style="color:#FF580E">离线</span>')
        }
        if(val.state==0 || val==null) {
          content.push('在线状态：<span style="color:#444">未知</span>')
        }

        content.push('状态通知：<span style="color:#1c7cd5">正常</span>')
        if(this.has(val.warringList,4)
          || this.has(val.warringList,5)
          || this.has(val.warringList,8)
          || this.has(val.warringList,9)){
          content.push('工器具使用：<span style="color:#FF580E">异常</span>')
        }else {
          content.push('工器具使用：<span style="color:#1c7cd5">正常</span>')
        }
        if(this.has(val.warringList,1)
          || this.has(val.warringList,2)){
          content.push('围栏预警：<span style="color:#FF580E">有</span>')
        }else {
          content.push('围栏预警：<span style="color:#1c7cd5">无</span>')
        }
        content.push('定位时间：' + this.format(val.recordTime))
        infoWindow.setContent(this.createInfoWindow(title, content.join('<br/>')))
        let lnglat = []
        lnglat.push(val.lon2)
        lnglat.push(val.lat2)
        infoWindow.open(global.map, lnglat)
      },
      // 构建自定义信息窗体
      createInfoWindow (title, content) {
        var info = document.createElement('div')
        info.className = 'info'

        // 可以通过下面的方式修改自定义窗体的宽高
        // info.style.width = '400px'
        // 定义顶部标题
        let top = document.createElement('div')
        let titleD = document.createElement('div')
        let closeX = document.createElement('img')
        top.className = 'info-top'
        titleD.innerHTML = title
        // closeX.src = ctx + '/static/img/close2.gif'
        closeX.onclick = this.closeInfoWindow()

        top.appendChild(titleD)
        top.appendChild(closeX)
        info.appendChild(top)

        // 定义中部内容
        let middle = document.createElement('div')
        middle.className = 'info-middle'
        middle.style.backgroundColor = 'white'
        middle.innerHTML = content
        info.appendChild(middle)

        let bt = document.createElement('div')
        bt.className = 'info-bt'
        bt.innerHTML='<a href="#">视频连接</a><a href="#" style="margin-left: 18px">语音通话</a>'
        info.appendChild(bt)

        // 定义底部内容
        let bottom = document.createElement('div')
        bottom.className = 'info-bottom'
        bottom.style.position = 'relative'
        bottom.style.top = '0px'
        bottom.style.margin = '0 auto'
        // var sharp = document.createElement('img')
        // sharp.src = ctx + '/static/img/sharp.png'
        // bottom.appendChild(sharp)
        info.appendChild(bottom)
        return info
      },
      closeInfoWindow () {
        //if (this.startInterval) clearInterval(this.startInterval)
        map.clearInfoWindow()
      },
      has(arr,num) {
        let bool = false; //默认不在数组中
        if(arr!=null && arr.length>0) {
          for (var i = 0, len = arr.length; i < len; i++) { //遍历数组的值
            if (arr[i] === num) {
              bool = true;  //若存在某个值与改值相等，bool值为true
              break
            }
          }
        }
        return bool; //返回bool
      },
      format (cjsj,time=false) {
        var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-'
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
        var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
        var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
        var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
        var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
        return Y+M+D+h+m+s
      },
    }
  }
</script>

<style scoped>
  .state-warring{
    color: #FF580E
  }
  .safe-radio-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 40px;
    width: 600px;
  }
  .safe-warring-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 114px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 390px;
    background-color: #fff;
    width: 600px;
  }
  .el-tabs__header{
    display: none;
  }
  .warring-tz{
    border-radius: 0.2rem;
    background:rgba(247,173,7,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-gj{
    border-radius: 0.2rem;
    background:rgba(255,144,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-qy{
    border-radius: 0.2rem;
    background:rgba(255,116,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-sos{
    border-radius: 0.2rem;
    background:rgba(255,88,14,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }
  .warring-dl{
    border-radius: 0.2rem;
    background:rgba(245,52,8,1);
    margin-right: 8px;
    margin-top: 5px;
    width: 77px;
    height: 33px;
    font-size: 12px;
    color: #fff;
    padding: 5px 10px;
  }

  .safe-warring-body-700 {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 114px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    padding: 0.15rem 0rem;
    border-radius: 0.2rem;
    z-index: 999;
    height: 200px;
    background-color: #fff;
    width: 760px;
  }
  .safe-warring-body-700 .el-tabs__header{
    display: none;
  }
  .safe-warring-body-700 .el-table__header tr,
  .safe-warring-body-700 .el-table__header th {
    padding: 0;
    height: 30px;
  }
  .safe-warring-body-700body .el-table__body tr,
  .safe-warring-body-700 .el-table__body td {
    padding: 0;
    height: 30px;
  }

  .safe-warring-body-700 .el-table__row td{
    background-color: rgba(233,243,252,1);
  }
  .safe-warring-body-700 .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(246,251,255,1);
  }
  .safe-warring-body-700 .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #d3faef;
    color: #118b9c;
  }

  .safe-warring-body table tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  .safe-warring-body table tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  .safe-warring-body table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }

  .safe-warring-body table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }

  .amap-info-outer .info-bt{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    color: #0f7dd1;
    text-align: center;
  }

  .amap-info-outer .info-bt a{
    color:#0f7dd1;
    text-decoration:none;
    font-weight: bold;
  }

  .amap-info-outer .info-bt a:hover{
    color:#0f7dd1;
    text-decoration:none;
    font-weight: bold;
  }

  .table-page{
    text-align: center;
    padding-top: 8px;
  }
  .el-table{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    font-weight: 500;
    color: #000;
  }
  .el-table td, .el-table th{
    padding: 3px 0;
  }
  .el-table-column--selection .cell{
    padding-left: 10px;
  }
  .userLabel{
    font-family: "Microsoft YaHei" ! important;
    font-weight: 600;
    color: #1c7cd5;
    height: 25px;
    background-color: #fff;
    border-radius: 18px;
    padding-top: 6px;
    margin-top: -8px;
    width:fit-content;
    width:-moz-fit-content;
    padding-right: 15px;
  }

  .amap-icon{
    z-index: 3;
  }
  .amap-marker-label {
    position: absolute;
    z-index: 2;
    border: 0px solid #fff;
    background-color: white;
    white-space: nowrap;
    cursor: default;
    font-size: 18px;
    line-height: 18px;
    width: 60px;
    height: 20px;
    padding-top: 8px;
    padding-left: 38px;
    border-radius: 18px;
  }

  .amap-list-body {
    flex-direction: column;
    min-width: 0;
    width: 355px;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 116px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    flex: 1 1 auto;
    padding: 0.15rem 0rem;
    border-radius: 0.4rem;
    height: 230px;
    z-index: 99999;
  }

  .amap-info-outer, .amap-menu-outer{
    border-radius: 4px;
  }
  .amap-info-outer .info{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    color: #000;
  }

  .amap-info-outer .info-top{
    font-family: "Microsoft YaHei" ! important;
    font-size: 14.5px;
    font-weight: bold;
    height: 24px;
    color: #1c7cd5;
    margin-left: 5px;
  }

  .amap-info-outer .info-middle{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    height: 104px;
    color: #000;
    margin-left: 5px;
    line-height:1.8;
  }
  .amap-info-outer .map-info-close{
    line-height: 2;
    top: 12px;
  }
</style>
